import React, { Component } from 'react'
import { Link,Route } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state={message:[
            {id:'01',title:'消息001'},
            {id:'02',title:'消息002'},
            {id:'03',title:'消息003'},
  ]}

  pushShow=(id,title)=>{
    this.props.history.push('/home/message/detail',{id,title})
  }

  replaceShow=(id,title)=>{
    this.props.history.replace('/home/message/detail',{id,title})
  }
  back=()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()
  }
  render() {
    const {message} = this.state
    return (
      <div>
        <ul>
            {
              message.map((mseObj)=>{
                return (
                  <li key={mseObj.id}>
                    <Link to={{pathname:'/home/message/detail',state:{id:mseObj.id,title:mseObj.title}}}>{mseObj.title}</Link>&nbsp;&nbsp;
                    <button onClick={()=>this.pushShow(mseObj.id,mseObj.title)}>push查看</button>
                    <button onClick={()=>{this.replaceShow(mseObj.id,mseObj.title)}}>replace查看</button>
                  </li>
                )
              })
            }
        </ul>
        <hr />
        <Route path='/home/message/detail' component={Detail}/>
        <button onClick={this.back}>回退</button>
        <button onClick={this.forward}>前进</button>
      </div>
    )
  }
}
